<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .layout { margin: 15px ; }
            .layout>* { margin: 15px ; }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="app">
            <base-layout>
                <template v-slot:header>
                    <h3 style="background: #5e83ff;color: #FFF">页眉</h3>
                </template>

                <template #default>
                    <h3>主体的标题</h3>
                    <p>主体的内容</p>
                </template>

                <template #footer>
                    <p style="background: #ff9e7b;color: #FFF">页脚</p>
                </template>
            </base-layout>
        </div>

        <script>
            const app = Vue.createApp( {} );

            app.component( 'BaseLayout' , {
               template: `<div class="border layout">
                            <header>
                                <slot name="header"></slot>
                            </header>
                            <main>
                                <!-- 若未显式指定名称则默认为 default (同一个组件中只能有一个) -->
                                <slot></slot>
                            </main>
                            <footer>
                                <slot name="footer"></slot>
                            </footer>
                          </div>`
            });

            app.mount( '#app' );
        </script>

    </body>
</html>